<template>
  <div>
    <el-card v-if="data.length" class="box-card">
      <div slot="header" class="clearfix">
        <span>wordpress发布记录</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="getList">刷新</el-button>
      </div>
      <div v-for="(item,index) in data" :key="index" class="text item">
        <span v-if="item.url !== null" style="margin-bottom: 2px;border-bottom: solid 1px #e6e6e6;"><a :href="item.url" target="_blank">{{ item.url.substring(0,30)+"..." }}</a></span>
        <span v-else style="margin-bottom: 2px;border-bottom: solid 1px #e6e6e6;">稍后发目录:{{ item.category }}</span>

      </div>
      <div class="bottom clearfix">
        <el-pagination
          v-if="data.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
    <!--<el-table :data="data" border fit highlight-current-row style="width: 100%"-->
    <!--@sort-change="handleSort">-->
    <!--<el-table-column align="center" label="链接" prop="url" sortable="custom">-->
    <!--</el-table-column>-->
    <!--</el-table>-->

    <el-card v-if="data2.length" class="box-card">
      <div slot="header" class="clearfix">
        <span>第三方推广记录</span>
        <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <div v-for="(o,index) in data2" :key="index" class="text item">
        <span style="margin-bottom: 2px;border-bottom: solid 1px #e6e6e6;"><a :href="o.url" target="_blank">{{ o.url.substring(0,30)+"..." }}</a></span>

      </div>
      <div class="bottom clearfix">
        <el-pagination
          v-if="data2.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
    <!--<el-table :data="data" border fit highlight-current-row style="width: 100%"-->
    <!--@sort-change="handleSort">-->
    <!--<el-table-column align="center" label="链接" prop="url" sortable="custom">-->
    <!--</el-table-column>-->
    <!--</el-table>-->

  </div>
</template>

<script>
import { Get as GetWPPost } from '@/api/cms/wppost'
import { Get as GetPublishPost } from '@/api/cms/postpublish'
import qs from 'qs'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Postpublishrecord',
  props: ['post_id'],
  data() {
    return {
      data: [],
      data2: [],
      listLoading: true,
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,
      pagesize1: 10,
      page1: 1,
      total1: 0
    }
  },
  watch: {
    post_id(v) {
      if (v > 0) {
        this.getList()
      } else {
        this.data = []
        this.listLoading = false
      }
    }
  },
  created() {
    // this.handleFetchProjects()
    this.getList()
  },
  methods: {
    resetTemp() {
      this.data = []
    },
    getList() {
      this.listLoading = true
      GetWPPost(null, qs.stringify({
        kw: '',
        post_id: this.post_id,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.scrollTop()
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
      GetPublishPost(null, qs.stringify({
        kw: '',
        post_id: this.post_id,
        pagesize: this.pagesize1,
        page: this.page1,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.scrollTop()
          this.data2 = response.data.data
          this.listLoading = false
          this.total1 = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleDelete(row) {
      console.log('delete')
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleCurrentChange(val) {
      if (val) {
        this.selectedImagelink = val.link
        this.$emit('wpattachmentSelelctChange', val)
      }
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeWebDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-select .el-input {
    width: 350px;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 68px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 168px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 100px;
  }
</style>
